<template>
	<view class="home-mian-list-cont">
		<!-- 吸顶 -->
		<u-sticky offset-top="-40" bgColor="#f3f4f6" :zIndex="9999">
			<u-tabs
				:list="props.tabList"
				@click="click"
				lineColor="#3c9cff"
				:activeStyle="{
					color: '#303133',
					fontWeight: 'bold',
					transform: 'scale(1.05)',
				}"
				itemStyle="height:44px;width:50%;"
			></u-tabs>
		</u-sticky>

		<template v-if="tabItem === '首页推荐'">
			<!-- 轮播图 首页推荐 才展示 -->
			<u-swiper :list="props.swiperList" keyName="image" showTitle height="160" :autoplay="false" circular></u-swiper>
			<BaseCard :renderList = 'props.renderList'></BaseCard>
		</template>

		<template v-if="tabItem === '排行榜单'">
			<BaseList :renderList = 'props.renderList' :showRankTag='true'></BaseList>
		</template>

		<template v-if="tabItem === '收藏'">
			<BaseList :renderList = 'props.renderList'></BaseList>
		</template>

		<template v-if="tabItem === '浏览历史'">
			<BaseList :renderList = 'props.renderList'></BaseList>
		</template>
	</view>
</template>

<script setup>
import { ref, onMounted,nextTick } from 'vue';
import BaseCard from './baseCard.vue';
import BaseList from './baseList.vue';

let tabItem = ref({});
let props = defineProps({
	tabList: {
		type: Array,
		default: () => [],
	},
	// tab 各项 页 渲染数据
	renderList:{
		type:Array,
		default:()=>[]
	},
	// 首页推荐才传入
	swiperList: {
		type: Array,
		default: () => [],
	},
});

// tab 标签改变
const click = (item) => {
	tabItem.value = item.name;
};
// 初始 tab 页
onMounted(() => {
	tabItem.value = props.tabList[0].name;
});

nextTick(()=>{
	
})
</script>

<style lang="scss">
.home-mian-list-cont {
	width: 100%;
}

:deep(.u-tabs__wrapper__nav__item) {
	padding: 0;
}

:deep(.u-sticky) {
	top: 0 !important;
}
</style>
